<script setup>
import { ref } from 'vue'
import {forget, get_user} from "@/axios/login.js";
import {useRouter} from "vue-router";
import {showFailToast} from "vant";

const onClickLeft = () => history.back();
const result = ref('请选择');
const checkRe = ref(false);
  const showForm = ref(false);
const showPicker = ref(false);
const username = ref('');
const password = ref('');
const passwordConfirm = ref('');
const load = ref(false);
const router = useRouter();

const pickDate = () =>{
  showPicker.value = true
}
const pickerValue = ref([]);
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('/');
  pickerValue.value = selectedValues;
  showPicker.value = false;
  if(result.value != "2023/08/30" ) {
      checkRe.value = true
  }else {
    checkRe.value = false
    showForm.value = true
  }
};
const validator = (val) => password.value === passwordConfirm.value ;

const onSubmit = (values) => {
  load.value = true;
  if(!(password.value === passwordConfirm.value)){
    showFailToast('确认密码不一致')
    return;
  }
  console.log(values)
  forget(values).then(res=>{
    // if(){
      router.push("/")
    // }
  }).catch(err=>{
    load.value  = false;
  })
}
</script>

<template>
  <van-nav-bar id="titlebar" :fixed="true" title=""
               left-text="返回"
               left-arrow
               @click-left="onClickLeft"
               :placeholder="true">、
  </van-nav-bar>
  <h3 style="margin-top: 60px;color: #5195FF">天天的生日是哪天？</h3>

  <p style="margin: 50px 20%; padding-bottom: 10px; color: #787878; border-bottom: #efefef 1px solid" @click="pickDate">{{result}}</p>
  <h2 v-show="checkRe" style="color: #f13649">回答错误</h2>
  <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
    <van-date-picker
        :model-value="pickerValue"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2025, 0, 1)"
        @confirm="onConfirm"
        @cancel="showPicker = false"
    />
  </van-popup>
  <van-form v-show="showForm"  @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="username"
          input-align="center"
          name="username"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          input-align="center"
          type="password"
          name="password"
          placeholder="密码"
          clearable
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="passwordConfirm"
          input-align="center"
          type="password"
          name="passwordConfirm"
          placeholder="确认密码"
          clearable
          :rules="[{ required: true, message: '请填写密码' },{ validator, message: '密码不一致' }]"
      />
    </van-cell-group>
    <van-row justify="space-around">
      <van-col span="18"> <van-button
          plain hairline native-type="submit"
          loading-text="请稍后..." size="large"
          :loading="load"
          type="primary">确认</van-button></van-col>
    </van-row>
  </van-form>
</template>

<style scoped>

</style>